<template>
  <pro-dialog ref="addTplDom" width="824" :nopadding="true" :title="`${tlpFlag?'编辑':'新增'}检测报告模版`">
    <div class="modal-tpl" style="padding: 6px 24px 24px">
      <YsForm class="add-form" label-position="top" ref="addTpFrom" :rules="ruleValidate" :model="templateInfo" inline>
        <YsRow :gutter="16">
          <YsCol span="12">
            <YsFormItem label="模版名称" prop="tp_name">
              <YsInput :class="curTheme" class="input-border" type="text" size="large" maxlength="15"
                v-model.trim="templateInfo.tp_name" placeholder="请输入模版名称">
              </YsInput>
            </YsFormItem>
          </YsCol>
          <YsCol span="12">
            <YsFormItem label="模版编号" prop="tp_code">
              <YsInput :class="curTheme" class="input-border" type="text" size="large" maxlength="15"
                v-model.trim="templateInfo.tp_code" placeholder="请输入模版编号">
              </YsInput>
            </YsFormItem>
          </YsCol>
        </YsRow>
        <YsRow>
          <YsCol span="24">
            <YsFormItem label="备注">
              <YsInput :class="curTheme" class="input-border" v-model="templateInfo.remark" show-word-limit
                type="textarea" maxlength="30" placeholder="请输入" :autosize="{ minRows: 4, maxRows: 5 }"></YsInput>
            </YsFormItem>
          </YsCol>
        </YsRow>
        <YsRow class="foot-btn" style="margin-top: 4px">
          <YsButton size="large" @click="$refs.addTplDom.close()">取消</YsButton>
          <YsButton size="large" @click="submitTpClick('addTpFrom')" type="primary">确定</YsButton>
        </YsRow>
      </YsForm>
    </div>
  </pro-dialog>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  name: 'addTpl',
  props: {
    tplObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    ...mapState(['curTheme']),
  },
  data() {
    return {
      tlpFlag: false,
      curTemplate: {},
      templateInfo: {
        tp_code: "",
        tp_name: "",
        remark: "",
      },
      ruleValidate: {
        tp_name: [
          { required: true, message: '请输入模版名称', trigger: 'blur' }
        ],
        tp_code: [
          { required: true, message: '请输入模版编号', trigger: 'blur' }
        ],
      },
    }
  },
  methods: {
    ...mapActions(['addTemplateAPI', "editTemplateAPI"]),
    //提交新增模板
    submitTpClick(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.tlpFlag) {
            this.exitTemplateFn()
          } else {
            this.addTemplateFn()
          }
        }
      })
    },
    // 新增
    addTemplateFn() {
      this.addTemplateAPI({ templateInfo: this.templateInfo }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.$YsMessage.success(data.message_text);
          this.$parent.getTempList()
          this.$refs.addTplDom.close()
        } else {
          this.$YsMessage.error(msg);
        }
      }).catch(err => {
        this.page.tableLoad = false
        this.$YsMessage.error('新增失败');
      })
    },
    // 编辑
    exitTemplateFn() {
      this.editTemplateAPI({ templateInfo: this.templateInfo }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.$YsMessage.success(data.message_text);
          this.$parent.getTempList()
          this.$refs.addTplDom.close()
        } else {
          this.$YsMessage.error(msg);
        }
      }).catch(err => {
        this.page.tableLoad = false
        this.$YsMessage.error('编辑失败');
      })
    },
    //打开弹出
    openTplModal(flag) {
      this.$refs.addTpFrom.resetFields()
      this.tlpFlag = flag
      if (flag) {
        this.templateInfo = JSON.parse(JSON.stringify(this.$parent.templateBean))
      } else {
        this.templateInfo = this.$options.data().templateInfo
      }
      this.$refs.addTplDom.show()
    }
  }
}
</script>

<style scoped lang='less'>
.modal-tpl {
  /deep/.ivu-form-item {
    width: 100%;
    margin-bottom: 24px;

    .ivu-input-word-count {
      top: initial;
      bottom: 10px;
    }
  }

  .foot-btn {
    /deep/ .ivu-btn {
      min-width: 96px !important;
    }
  }
}

/deep/ .theme-blue.input-border {
  textarea {

    border: 1px solid #566582 !important;
  }

  input {
    border: 1px solid #566582 !important;
  }
}
</style>